$f-table-has-form-common-gutter: 1rem;
$f-table-has-form-inner-gutter: 0.75rem $f-table-has-form-common-gutter;

.f-form-is-table {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
}

.f-table-has-form {
  overflow: hidden;
  box-shadow: 0 0 0 1px $farris-grid-border;
  border-radius: 10px;
  margin: 0;

  td {
    padding: 0;
    height: 43px;
  }

  .farris-group-wrap--label {
    padding: $f-table-has-form-inner-gutter;
    width: 124px;

    .farris-label-wrap {
      height: 100%;
    }

    .form-group--has-tips {
      display: flex;

      .farris-label-tips {
        position: relative;
        bottom: auto;
        margin: 1px 0 0 4px;
        flex-shrink: 0;
      }

      .col-form-label {
        flex: 1 1 0;
      }
    }

    .col-form-label {
      display: flex;
      margin: 0;
      align-items: center;
      flex-shrink: 0;
      justify-content: flex-end !important;
      flex-direction: row !important;
      align-self: start;
      word-break: break-all;
      min-width: 82px;
      height: 100%;
    }

    .farris-label-text {
      text-align: right;
      white-space: pre-wrap;
    }

    .farris-label-info {
      padding: 0 .25rem 0 0;
      flex-shrink: 0;
      line-height: 1.4286;
      white-space: nowrap;
    }
  }

  .farris-group-wrap--input {
    //提示信息显示
    position: relative;

    overflow: initial;

    .farris-input-wrap {
      height: 100%;

      &.farris-textarea-wrap {
        min-height: 60px;
      }

      .form-control {
        height: 100%;
        border: none;
        border-radius: 0;
        padding-left: $f-table-has-form-common-gutter;

        &.form-control-invalid {
          box-shadow: inset 0 0 0px 1px $f-semantic-danger-01;

          &:focus {
            box-shadow: inset 0 0 0px 1px $f-semantic-danger-01;
          }
        }
      }

      //下拉，日期 ，时间
      .f-cmp-inputgroup,
      .f-component-timepicker {
        height: 100%;

        .input-group {
          height: 100%;
          border: none;
        }
      }

      .f-cmp-number-spinner {
        .input-group {
          height: 100%;
          border: none;

          .btn-group-number {
            height: 100%;

            .btn-number-flag {
              border: none;
            }

            .btn-number-flag:nth-child(2) {
              border: none;
            }
          }
        }

        .number-arrow-chevron {
          font-size: 1rem;
        }
      }

      .input-group .input-group-append.f-cmp-iconbtn-wrapper .f-cmp-iconbtn .f-icon {
        font-size: 1rem;
      }

      .lookupbox .input-group-append .f-icon-lookup {
        font-size: 1.125rem;
      }

      // 单选组、多选组
      farris-radiogroup,
      farris-checkboxgroup {
        .farris-input-wrap {
          padding: $f-table-has-form-inner-gutter;
        }
      }

      // 横向排列
      .farris-checkradio-hor {
        align-items: center;
      }
    }

    .farris-html-editor {
      border: none;
    }

    // 富文本
    .farris-html-editor-border .ql-container.ql-disabled {
      border: none !important;
      padding: $f-table-has-form-inner-gutter;
      ;
    }

    // 单个 单选和多选
    &>.farris-input-wrap>.custom-control {
      height: 100%;
      display: flex;
      align-items: center;
      padding: $f-table-has-form-inner-gutter;
    }

    .f-component-text {
      height: 100%;
      display: flex;
      align-items: center;

      .f-form-control-text {
        border-color: transparent;
        white-space: pre-wrap;
        padding-left: $f-table-has-form-common-gutter;
      }

      .f-form-control-textarea {
        border-color: transparent;
        padding-left: $f-table-has-form-common-gutter;
      }
    }
  }

  .input-group {
    .input-group-append {
      padding-right: 0.5rem;
    }

    .input-append-wrapper {
      padding-right: 0;
    }
  }

  .input-group .input-group-append.f-cmp-iconbtn-wrapper {
    padding-right: 0.5rem;

    .datepicker-clear {
      right: 0.5rem !important;
    }
  }

  // 间距
  .input-append-wrapper {
    .input-group-text {
      padding-left: $f-table-has-form-common-gutter;
      padding-right: $f-table-has-form-common-gutter;
    }
  }

  .input-append-button {
    border-left: 1px solid $farris-grid-border;
    margin-left: 1px;
  }

  .f-cmp-text-input-append,
  .f-cmp-textarea-input-append,
  .f-cmp-static-text-input-append {
    .input-append-button {
      margin-left: 0;
    }
  }

  .farris-editor .mce-tinymce,
  .farris-editor .farris-editor-placeholder {
    border: none;
  }

  .farris-input-wrap {

    // 多行文本框
    .f-cmp-text-is-textarea {
      flex-direction: column;

      .f-form-control-textarea {
        flex: 1 1 0;
        width: 100%;
      }
    }

    // 人员选择
    .f-personnel-selector {

      &,
      & .s-select-help {
        height: 100%;
      }

      .s-input-group {
        border: none !important;
      }
    }
  }
}

/*追加input-append指令*/
.f-cmp-text-input-append,
.f-cmp-textarea-input-append,
.f-cmp-static-text-input-append {
  display: flex;
  height: 100%;
}

.f-cmp-textarea-input-append,
.f-cmp-static-text-input-append {
  align-items: flex-start;
}

.f-cmp-static-text-input-append {

  .f-form-control-text,
  .f-form-control-textarea {
    flex: 1 1 0;
  }
}

.f-cmp-text-input-append,
.f-cmp-textarea-input-append,
.f-cmp-static-text-input-append {
  .input-append-wrapper {
    flex-shrink: 0;
    height: 100%;
  }
}

.input-append-wrapper.f-state-disabled {
  display: none;
}

/**
* 时间、数值
**/
.input-append-text {
  .input-group-text {
    color: $farris-input-color;

    // &:hover {
    //   color: inherit;
    // }
  }
}

.input-append-button {
  background: $f-neutral-00;

  .input-group-text {
    color: $farris-primary;
  }
}

// 默认按钮：白底，蓝色文字
.f-cmp-inputgroup,
.f-component-text,
.f-cmp-text-input-append {
  .input-append-text {
    .input-group-text {
      color: $farris-input-color;

      // &:hover {
      //   color: inherit;
      // }
    }
  }

  .input-append-button {
    background: $f-neutral-00;

    .input-group-text {
      color: $farris-primary;
    }
  }
}

.f-cmp-text-input-append,
.f-cmp-textarea-input-append,
.f-component-text,
.input-group {
  .input-append-wrapper {
    background: $f-input-bg;

    &>.input-group-text {
      border: 0;
    }

    &>.input-group-text {
      background: transparent;
    }
  }
}